<template>
	<view>
		<!-- <view @click="$func.jump('/yCreate/pages/shoppingCart')" class="cart u-flex-col u-flex-center">
			<image src="@/static/wImg/cart1.png"></image>
			购物车
		</view> -->
		<image src="../../static/index/cart.png" mode="" class="cart u-flex-col u-flex-center"
			@click="$func.jump('/yCreate/pages/shoppingCart')"></image>
		<!-- #ifndef H5 -->
		<uni-nav-bar :fixed="true" :shadow="false" :statusBar="true" title="千创商城" color="#ffffff">
		</uni-nav-bar>
		<view :style="{height:`${configInfo.navBarHeight}px`}"></view>
		<!-- #endif -->
		<!-- <view class="top">
			<view :style="'height:' + top +'px'"></view>
			<view class="u-flex u-row-between">
				<view class="u-flex top_add" @click="addShow = true">
					<view class="top_add_text">{{city}}</view>
					<image src="@/static/wImg/san.png" class="top_san"></image>
				</view>
				<view class="u-flex top_sea" @click="$func.jump('/wNew/pages/sieveStore')">
					<image src="@/static/wImg/seach.png" class="top_sea_img"></image>
					<input type="text" placeholder-style="color:#fff;" placeholder="输入您想要的内容">
				</view>
			</view>
		</view> -->
		<image :src="configInfo.shop_img_url" mode="" class="barimg" @tap.stop="goRich(2)"></image>
		<view style="padding: 0 30rpx;">
			<u-swiper :list="list" height="272" style="margin-top: 20rpx;"></u-swiper>
			<view class="padding-lr-20 padding-tb-15 bg-ff radius-10 margin-top-20">
				<view class="border-ed padding-20 flex align-center radius-10">
					<image src="../../static/wImg/greySea.png" mode="" class="searchimg"></image>
					<view class="searchline"></view>
					<view class="text-24 flex-one text-98">输入您想要的内容</view>
				</view>
			</view>
			<!-- 我的足迹 -->
			<view class="fill-base pl-lg pr-lg pb-lg margin-top-20 padding-tb-30 radius-10"
				v-if="fplist && fplist.length > 0">
				<view @tap.stop="$util.goUrl({url: `/pages/technician`,openType: `reLaunch`})" class="flex-between pb-lg">
					<view class="f-st-title text-bold flex-between">
						<view class="mr-md" style="width: 15px;height: 17px;">
							<image src="../../static/index/zj.png" class="van-img" style="object-fit: cover;"></image>
						</view>
						我的足迹
					</view>
				</view>
				<scroll-view scroll-x class="recommend-technician">
					<block v-for="(item,index) in fplist" :key="index" @tap.stop="godetail(item.id)">
						<view class="recommend-item type-1" @tap.stop="godetail(item.id)">
							<!-- #ifdef H5 -->
							<view class="cover radius-16">
								<view class="h5-image cover radius-16" :style="{ backgroundImage : `url('${item.image}')`}">
								</view>
							</view>
							<!-- #endif -->
							<!-- #ifndef H5 -->
							<image mode="aspectFill" lazy-load class="cover radius-16" :src="item.image"></image>
							<!-- #endif -->
							<view class="flex-center f-desc c-title text-bold mt-md">
								<view class="ellipsis">{{item.title}}</view>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
			<view class="classify u-flex u-flex-wrap u-row-between">
				<view class="u-flex-col u-col-center cla_item" @click="goClass(item.id)" v-for="item in classifyList">
					<image :src="item.image"></image>
					{{item.name}}
				</view>
			</view>
			<view class="burst u-flex u-col-top u-row-between">
				<view class="burst_left">
					<view class="bur_top">
						<image src="../../static/wImg/greenBg.png"></image>
						<text class="bur_more" @click="$func.jump('/wNew/pages/sieveStore?goods_type=1')">更多<u-icon
								style="margin-left:5rpx" size="20" name="arrow-right" color="#999"></u-icon></text>
					</view>
					<view class="u-flex u-flex-wrap u-row-between" style="padding: 10rpx;">
						<view class="bur_item u-flex-col u-flex-center" v-for="(item,index) in platform_bk" :key="index"
							@click="$func.jump('/wNew/pages/detail?id=' + item.id)">
							<image :src="item.image" mode="aspectFill"></image>
							<view class="bur_price">￥{{item.price}}</view>
						</view>
					</view>
				</view>
				<view style="width: 48%;">
					<view class="burst_left" style="width: 100%;">
						<view class="bur_top">
							<image src="../../static/wImg/pinkBg.png"></image>
							<text class="bur_more" @click="$func.jump('/wNew/pages/sieveStore?goods_type=2')">更多<u-icon
									style="margin-left:5rpx" size="20" name="arrow-right" color="#999"></u-icon></text>
						</view>
						<view class="u-flex u-flex-wrap u-row-between" style="padding: 10rpx;">
							<view class="bur_item " v-for="(item,index) in platform_hot" :key="index"
								@click="$func.jump('/wNew/pages/detail?id=' + item.id)">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<!-- <view class="bur_item " >
								<image src="../../static/wImg/tc_6.png" mode="aspectFill"></image>
							</view> -->
						</view>
					</view>
					<view class="burst_left" style="width: 100%;margin-top: 20rpx;">
						<view class="bur_top">
							<image src="../../static/wImg/orangeBg.png"></image>
							<text class="bur_more" @click="$func.jump('/wNew/pages/sieveStore?goods_type=3')">更多<u-icon
									style="margin-left:5rpx" size="20" name="arrow-right" color="#999"></u-icon></text>
						</view>
						<view class="u-flex u-flex-wrap u-row-between" style="padding: 10rpx;">
							<view class="bur_item " v-for="(item,index) in platform_ms" :key="index"
								@click="$func.jump('/wNew/pages/detail?id=' + item.id)">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<!-- <view class="bur_item ">
								<image src="../../static/wImg/tc_8.png" mode="aspectFill"></image>
							</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="tit u-flex u-row-between">
				<view class="tit_item" @click="titFn(index)" :class="index == titIndex ?'tit_css' :''"
					v-for="item,index in titList">
					<image src="../../static/wImg/greRight.png" v-if="index == titIndex"></image>
					<image src="../../static/wImg/blaRight.png" v-else></image>
					<text>{{item}}</text>
					<image src="../../static/wImg/greLft.png" v-if="index == titIndex"></image>
					<image src="../../static/wImg/blaLeft.png" v-else></image>
				</view>
			</view> -->
			<view class="flex align-center justify-center margin-top-20">
				<image src="../../static/index/newleft.png" class="btimg"></image>
				<view class="text-28 text-bold margin-lr-10" style="color: #FF7A10;">商品推荐</view>
				<image src="../../static/index/newright.png" class="btimg"></image>
			</view>

			<mescroll-body :sticky="true" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
				<!-- <view class="">
					<u-waterfall v-if="sshow" v-model="leftList" ref="uWaterfall">
						<template v-slot:left="{leftList}">
						</template>
						<template v-slot:right="{rightList}">
						</template>
					</u-waterfall>
				</view> -->
				<view class="listbox">
					<view class="demo-warter" @click="$func.jump('/wNew/pages/detail?id=' + item.id)"
						v-for="(item, index) in flowList" :key="index">
						<!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
						<u-lazy-load threshold="-450" border-radius="10" :image="item.image"
							:index="index"></u-lazy-load>
						<view style="margin-top: 20rpx;">
							<text class="mark" v-if="item.shop.isself == 1">平台</text>
							<text class="mark markOra" v-else>商家</text>
							<text class="mark markOra" v-if="item.platform_ms == 1">秒杀</text>
							<text class="mark markOra" v-if="item.platform_hot == 1">折扣</text>
							{{item.title}}
						</view>
						<view class="demo-tag">
							<view class="demo-tag-text" v-for="(items,indexs) in item.json" :key="indexs">
								{{items}}
							</view>
							<!-- <view class="demo-tag-text demo-tag-text-grey">
								特产标签
							</view> -->
						</view>
						<view class="demo-price">
							<text>￥</text>{{item.price}}
							<text class="demo-price-grey">￥{{item.hx_price}}</text>
						</view>
						<!-- <view class="demo-shop" @click.stop="$func.jump('/wNew/pages/store?id=' + item.shop_id)">
							<image src="../../static/wImg/home.png"></image>
							{{item.shop.shopname}}
							<u-icon name="arrow-right" color="#999"></u-icon>
						</view> -->
						<view class="flex align-center">
							<view class="demo-shop" @click.stop="$func.jump('/wNew/pages/store?id=' + item.shop_id)">
								<image src="../../static/wImg/home.png"></image>
								{{item.shop.shopname}}
								<u-icon name="arrow-right" color="#999"></u-icon>
							</view>
							<view class="flex align-center flex-one justify-center">
								<image src="../../static/index/zb.png" mode="" class="zbimg"></image>
								<view class="text-20 margin-left-10" style="color: #F76B1C;">直播中</view>
							</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
		<u-tabbar v-model="current" @change="changeTab" height="55px" active-color="#606DCE" inactive-color="#989898"
			:list="tabList"></u-tabbar>
		<view class="layer" v-if="addShow">
			<view class="layer-content">
				<view
					class="confirm-bar line-height-80 padding-lr-30 bg-ff border-bottom-ed flex align-center justify-between">
					<view class="text-cc" @click="addShow=false">取消</view>
					<view class="" style="color:#007aff;" @click="adresSubmit()">确定</view>
				</view>
				<picker-view :value="multiIndex" :indicator-style="indicatorStyle" class="picker-view"
					@change="changeAdres">
					<picker-view-column>
						<view class="item-pircker" v-for="(item,index) in arealist1" :key="index">{{item.name}}</view>
					</picker-view-column>
					<picker-view-column v-if="arealist2">
						<view class="item-pircker" v-for="(item,index) in arealist2" :key="index">{{item.name}}</view>
					</picker-view-column>
					<!-- <picker-view-column v-if="arealist3">
							<view class="item-pircker" v-for="(item,index) in arealist3" :key="index">{{item.name}}</view>
						</picker-view-column> -->
				</picker-view>
			</view>
		</view>
		<!-- <u-picker v-model="addShow" @confirm="addConfirm" mode="region"></u-picker> -->
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				top: 0,
				city: '北京市',
				addShow: false,
				sshow: true,
				list: [],
				classifyList: [],
				titList: ['平台优选', '地方商家'],
				titIndex: 1,
				flowList: [],
				tabList: [{
						iconPath: "../../static/tab/shouye_nor.png",
						selectedIconPath: "../../static/tab/shouye_sel.png",
						text: '首页',
					},
					{
						iconPath: "../../static/tab/cate_nor.png",
						selectedIconPath: "../../static/tab/cate_sel.png",
						text: '分类',
					},
					{
						iconPath: "../../static/tab/live_nor.png",
						selectedIconPath: "../../static/tab/live_sel.png",
						text: '直播',
					},
					{
						iconPath: "../../static/tab/dynamic_nor.png",
						selectedIconPath: "../../static/tab/dynamic_sel.png.png",
						text: '动态',
					},

					{
						iconPath: "../../static/tab/wode_nor.png",
						selectedIconPath: "../../static/tab/wode_sel.png",
						text: '我的',
					},
				],
				current: 0,
				platform_bk: "",
				platform_hot: "",
				platform_ms: "",
				arealist1: [],
				arealist2: [],
				arealist3: [],
				areaname: "",
				multiIndex: [0, 0, 0],
				indicatorStyle: 'height: 80rpx;',
				fplist:[]
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		onLoad() {
			let res = uni.getSystemInfoSync()
			if (res.safeAreaInsets.top == 0) {
				this.top = 20;
			} else {
				this.top = res.safeAreaInsets.top;
			}
			var city_name = uni.getStorageSync('city_name')
			if (city_name) {
				this.city = city_name
			}

			this.indexFn()
			this.$u.post('/api/index/get_hot', {
				location_city: uni.getStorageSync('city')
			}).then(res => {
				if (res.code == 1) {
					this.platform_bk = res.data.platform_bk
					this.platform_hot = res.data.platform_hot
					this.platform_ms = res.data.platform_ms
				}
			});
			this.$u.post('/api/index/area_list', {}).then(res => {
				if (res.code == 1) {
					var address = res.data
					this.arealist1 = address
					this.arealist2 = address[0].children
					this.arealist3 = address[0].children[0].children
				}
			})
			this.$u.post('/api/index/get_index_category', {
				location_city: uni.getStorageSync('city')
			}).then(res => {
				if (res.code == 1) {
					this.classifyList = res.data
				}
			});
			if (uni.getStorageSync('city')) {
				uni.setStorageSync('city', '北京/北京市')
			}

		},
		onShow() {
			this.getfootprints()
		},
		methods: {
			//足迹
			async getfootprints() {
				let res = await this.$api.service.footPrint({
					shopFootprints: 0,
					serviceFootprints:1
				})
				console.log(res,'足迹')
				this.fplist = res
			},
			indexFn() {
				this.$u.post('/api/index/get_banner').then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				});
			},
			titFn(index) {
				this.titIndex = index
				this.sshow = false
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				this.mescroll.optDown.use = false;
				this.mescroll.optUp.textNoMore = '- 已经到底啦 -'
				this.$u.post('/api/index/likes', {
					page: page.num,
					limit: page.size,
					type: this.titIndex + 1,
					location_city: uni.getStorageSync('city')
				}).then(res => {
					this.mescroll.endBySize(res.data.data.length, res.data.total);
					if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
					this.flowList = this.flowList.concat(res.data.data); //追加新数据
					this.sshow = true
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			changeTab(e) {
				if (e == 0) {
					this.$func.jump('/pages/service')
				} else if (e == 1) {
					this.$func.jump('/wNew/pages/classify')
				} else if (e == 2) {
					this.$func.jump('/pages/dyamicshop?children=2&area_id=' + uni.getStorageSync('city'))
				} else if (e == 3) {
					this.$func.jump('/pages/live')
				} else if (e == 4) {
					this.$func.jump('/pages/mine')
				}
			},
			addConfirm(e) {
				this.city = e.city.label
				console.log(e)
				var dz = e.province.label + '/' + e.city.label
				uni.setStorageSync('city', dz)
				this.$u.post('/api/index/get_hot', {
					location_city: uni.getStorageSync('city')
				}).then(res => {
					if (res.code == 1) {
						this.platform_bk = res.data.platform_bk
						this.platform_hot = res.data.platform_hot
						this.platform_ms = res.data.platform_ms
					}
				});
				this.$u.post('/api/index/likes', {
					page: 1,
					location_city: uni.getStorageSync('city')
				}).then(res => {
					this.flowList = res.data.data; //追加新数据
				})
			},
			changeAdres(e) {
				let curMultiIndex = e.detail.value
				if (curMultiIndex[0] != this.multiIndex[0]) {
					this.multiIndex = [curMultiIndex[0], 0, 0]
				} else if (curMultiIndex[1] != this.multiIndex[1]) {
					this.multiIndex = [this.multiIndex[0], curMultiIndex[1], 0]
				} else if (curMultiIndex[2] != this.multiIndex[2]) {
					this.multiIndex = [this.multiIndex[0], this.multiIndex[1], curMultiIndex[2]]
				}
				console.log(this.multiIndex)
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				this.arealist2 = this.arealist1[i].children
				this.arealist3 = this.arealist1[i].children[j].children
				console.log(this.cateid)
			},
			adresSubmit() {
				var i = this.multiIndex[0]
				var j = this.multiIndex[1]
				var k = this.multiIndex[2]
				var dz = this.arealist1[i].name + '/' + this.arealist1[i].children[j].name
				this.city = this.arealist1[i].children[j].children[k].name
				uni.setStorageSync('city', dz)
				uni.setStorageSync('city_name', this.arealist1[i].children[j].name)
				this.$u.post('/api/index/get_hot', {
					location_city: uni.getStorageSync('city')
				}).then(res => {
					if (res.code == 1) {
						this.platform_bk = res.data.platform_bk
						this.platform_hot = res.data.platform_hot
						this.platform_ms = res.data.platform_ms
					}
				});
				this.$u.post('/api/index/likes', {
					page: 1,
					location_city: uni.getStorageSync('city'),
					type: this.titIndex + 1
				}).then(res => {
					this.flowList = res.data.data; //追加新数据
					this.mescroll.endBySize(res.data.data.length, res.data.total);

				})
				this.addShow = false
			},
			goClass(id) {
				if (id) {
					uni.navigateTo({
						url: '/wNew/pages/classify?id=' + id
					})
				} else {
					uni.navigateTo({
						url: '/wNew/pages/classify'
					})
				}
			},
			goRich(type){
				uni.navigateTo({
					url: '/pages/rich?type=' + type
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import url(../../components/common.css);

	.cart {
		width: 140rpx;
		height: 140rpx;
		position: fixed;
		bottom: 200rpx;
		border-radius: 50%;
		background: #fff;
		right: 20rpx;
		z-index: 9999;
		font-size: 28rpx;

		image {
			width: 40rpx;
			height: 40rpx;
			margin-bottom: 7rpx;
		}
	}

	.top {
		padding: 0 30rpx 200rpx;
		background-color: #1db481;

		.top_add {

			.top_add_text {
				width: 120rpx;
				font-size: 28rpx;
				color: #FFF;
				overflow: hidden; // 文字超长隐藏
				text-overflow: ellipsis; // 显示...
				white-space: nowrap; // 单行显示
			}

			.top_san {
				width: 22rpx;
				height: 10rpx;
				margin-left: 10rpx;
			}
		}

		.top_sea {
			flex: 1;
			z-index: 999;
			margin-left: 40rpx;
			height: 60rpx;
			padding: 0 18rpx;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 0.7);
			border-radius: 10rpx 10rpx 10rpx 10rpx;

			.top_sea_img {
				width: 25.15rpx;
				height: 23.6rpx;
			}

			input {
				color: #fff;
				height: 20rpx;
				font-size: 24rpx;
				padding: 0 18rpx;
				margin-left: 18rpx;
				border-left: 1rpx solid #fff;
			}
		}
	}

	.classify {
		background: #fff;
		margin-top: 20rpx;
		padding: 30rpx 58rpx 6rpx;
		border-radius: 20rpx;

		.cla_item {
			font-size: 24rpx;
			color: #333;
			z-index: 999;
			margin-right: 60rpx;
			margin-bottom: 24rpx;

			&:nth-child(4n) {
				margin-right: 0;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 12rpx;
			}
		}
	}

	.burst {
		margin-top: 20rpx;

		.burst_left {
			width: 48%;
			background: #fff;
			border-radius: 20rpx;

			.bur_top {
				width: 100%;
				height: 48rpx;
				text-align: right;
				position: relative;

				image {
					width: 100%;
					height: 48rpx;
					position: absolute;
				}

				.bur_more {
					font-size: 20rpx;
					color: #999;
					padding-right: 10rpx;
				}
			}

			.bur_item {
				width: 148rpx;
				margin-bottom: 10rpx;

				image {
					width: 148rpx;
					height: 148rpx;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
				}

				.bur_price {
					font-size: 24rpx;
					color: #FF5125;
					margin-top: 10rpx;
				}
			}
		}
	}

	.tit {
		background: #fff;
		height: 76rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		margin-bottom: 10rpx;

		.tit_item {
			width: 50%;
			z-index: 999;
			display: flex;
			color: #666666;
			align-items: center;
			justify-content: center;

			&:first-child {
				border-right: 1rpx solid #DBDBDB;
			}

			text {
				font-size: 28rpx;
				font-weight: bold;
				letter-spacing: 8rpx;
				margin: 0 3rpx 0 7rpx;
			}

			image {
				width: 23rpx;
				height: 19rpx;
				margin-bottom: -6rpx;
			}
		}

		.tit_css {
			color: #1DB481;
		}
	}

	.demo-warter {
		border-radius: 8px;
		margin-bottom: 15rpx;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
		width: 340rpx;
		display: inline-block;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		// font-size: 30rpx;
		// margin-top: 5px;
		// color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid #F43000;
		color: #F43000;
		margin-right: 8px;
		line-height: 1;
		padding: 8rpx 24rpx 8rpx 24rpx;
		display: flex;
		align-items: center;
		border-radius: 4rpx;
		font-size: 20rpx;
	}

	.demo-tag-text-grey {
		border: 1px solid #999;
		color: #999;
	}

	.mark {
		font-size: 20rpx;
		color: #fff;
		padding: 6rpx 10rpx;
		background: #1DB481;
		border-radius: 4rpx;
		margin-right: 20rpx;
	}

	.markOra {
		background: #ef5205;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
		font-weight: bold;
		font-size: 32rpx;

		text {
			font-size: 20rpx;
		}

		.demo-price-grey {
			color: #D3D3D3;
			font-size: 20rpx;
			font-weight: 400;
			margin-left: 18rpx;
			text-decoration: line-through;
		}
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		image {
			width: 20rpx;
			height: 20rpx;
			margin-right: 8rpx;
		}
	}

	.layer {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999
	}

	.layer-content {}

	/* 浮层内容 */
	.confirm-bar {
		position: fixed;
		bottom: 600rpx;
		left: 0;
		width: 750rpx;
	}

	.line-height-80 {
		height: 80rpx;
		line-height: 80rpx;
	}

	.padding-lr-30 {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}

	.bg-ff {
		background: #fff;
	}

	.border-bottom-ed {
		border-bottom: 1rpx solid #ededed;
	}

	.flex {
		display: flex;
	}

	.align-center {
		align-items: center;
	}

	.justify-between {
		justify-content: space-between;
	}

	.picker-view {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 750rpx;
		height: 600rpx;
		background: #fff;
	}

	.item-pircker {
		line-height: 80rpx;
		height: 80rpx;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.listbox {
		width: 100%;
		// height: 100vh;
		column-count: 2;
		column-gap: 0;
		margin-top: 20rpx;
		overflow: hidden;
		// column-gap: 10px;
		// display: flex;
		// justify-content: space-between;
		// flex-wrap: wrap;
	}
	.barimg{
		width: 690rpx;
		height: 120rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 20rpx auto 0;
		display: block;
	}
	.searchimg{
		width: 25rpx;
		height: 23rpx;
	}
	.searchline{
		width: 2rpx;
		height: 32rpx;
		background: #B0B0B0;
		margin: 0 20rpx;
	}
	.van-img {
		width: 100%;
		height: 100%;
	}
	.recommend-technician {
		white-space: nowrap;
		// width: 690rpx;
		// overflow: hidden;
		.recommend-item {
			display: inline-block;
		}
	
		.recommend-item.type-1 {
			width: 180rpx;
			margin-left: 26rpx;
	
			.cover {
				width: 180rpx;
				height: 180rpx;
			}
	
			.ellipsis {
				max-width: 180rpx;
			}
		}
	
		.recommend-item.type-2 {
			width: 203rpx;
			height: 151rpx;
			background: #F4F6F7;
			border-radius: 12rpx;
			margin-left: 20rpx;
	
			.cover {
				width: 70rpx;
				height: 70rpx;
			}
	
			.ellipsis {
				max-width: 82rpx;
			}
	
			.iconyduixingxingshixin {
				font-size: 26rpx;
				background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
			}
	
			.star-text {
				height: 26rpx;
				color: #FF9519;
				margin-left: 6rpx;
			}
	
			.new-technician {
				width: 67rpx;
				height: 30rpx;
				border-radius: 8rpx;
				transform: rotateZ(360deg);
			}
		}
	
		.recommend-item:nth-child(1) {
			margin-left: 0;
		}
	}
	.btimg{
		width: 24rpx;
		height: 20rpx;
	}
	.zbimg {
		width: 24rpx;
		height: 20rpx;
	}
	
</style>